<template>
  <view>
    <uni-row>
      <picker  :value="days" :range="dayWord" @change="dateChange">
        <button >{{dayWord[days]}}</button>
      </picker>
    </uni-row>
    <uni-row>
      <view class="navbar">
        <view class="nav-item" :class="{current:currentIndex === 0}" @click="handleChange(0)">
          全部
        </view>
        <view class="nav-item" :class="{current:currentIndex === 1}" @click="handleChange(1)">
          待记录
        </view>
        <view class="nav-item" :class="{current:currentIndex === 2}" @click="handleChange(2)">
          已拒绝
        </view>
        <view class="nav-item" :class="{current:currentIndex === 3}" @click="handleChange(3)">
          待同步
        </view>
        <view class="nav-item">
          房间：
          <uni-data-select v-model="roomId" :localdata="roomList">
          </uni-data-select>
        </view>
      </view>
    </uni-row>
   <uni-fab :content="content" horizontal="right" @trigger="handleClick"/>
    <view class="swiper-box">
      <scroll-view class="backg">
        <uni-row>
          <uni-col class="info-box" :xs="24" :sm="11" v-for="item in feedlist" :key="item.feed.id" @click="handleUpdate(item)">
            <uni-row>
              <uni-col :span="15" :offset="1">
                <uni-title :title="item.feed.batchNumber" type="h1"/>
              </uni-col>
              <uni-col :span="8" class="status">
                <uni-tag v-if="item.change != null" text="待同步"
                         circle inverted style="margin-right: 15px"></uni-tag>
                <uni-tag v-if="item.change == null && item.feed.tableStatus == '0' && item.feed.updatedTime == null" text="待记录"
                         type="primary"
                         circle inverted style="margin-right: 15px"></uni-tag>
				<uni-tag v-if="item.change == null && item.feed.tableStatus == '0' && item.feed.updatedTime != null" text="已通过"
						 type="success"
						 circle inverted style="margin-right: 15px"></uni-tag>
				<uni-tag v-if="item.feed.tableStatus == '2'" text="已拒绝"
						type="error"
						circle inverted style="margin-right: 15px"></uni-tag>
				<uni-tag v-if="item.feed.tableStatus == '2'" text="待记录"
						type="primary"
						circle inverted style="margin-right: 15px"></uni-tag>
				<uni-tag v-if="item.feed.tableStatus == '1'" text="待审批"
						type="success"
						circle inverted style="margin-right: 15px"></uni-tag>
              </uni-col>
            </uni-row>
            <uni-row>
              <uni-col :span="24">
                <uni-row style="padding: 10px">
                  <uni-col :span="12" class="text">
                    类&nbsp;&nbsp;&nbsp;&nbsp;型 : {{ item.feed.bugType }}
                  </uni-col>
                  <uni-col :span="12" class="text">
                    轮&nbsp;&nbsp;&nbsp;&nbsp; 次 : {{ item.feed.round }}
                  </uni-col>
                  <uni-col :span="12" class="text">
                    换 虫 数 量 : {{ item.feed.changeNum }}
                  </uni-col>
                  <uni-col :span="12" class="text">
                    周&nbsp;&nbsp;&nbsp;&nbsp;期 : {{ item.feed.period + '天' }}
                  </uni-col>
                  <uni-col :span="12" class="text">
                    本次换料时间 : {{ item.feed.reloadDay }}
                  </uni-col>
                  <uni-col :span="20" class="text">
                    换 虫 月 份  : {{ item.feed.optionMonth }}
                  </uni-col>
                </uni-row>
              </uni-col>
            </uni-row>
          </uni-col>
        </uni-row>
      </scroll-view>
    </view>
    <view>
      <!-- 普通弹窗 -->
      <uni-popup ref="dateSelect">
        <picker-view :indicator-style="'height: 50px'" :value="days" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item,index) in dayWord" :key="index">{{item}}</view>
          </picker-view-column>
        </picker-view>
      </uni-popup>
    </view>

  </view>
</template>

<script setup lang="ts">
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
import {
  FeedClickHandle,
  FeedDataHandle,
    FeedDateSelect
} from "../../pagesVM/feed";
import {
  computed,
  ref,
  watch
} from "vue";
import {
  loginService
} from "../../pagesVM/login";
import UniFab from "../../uni_modules/uni-fab/components/uni-fab/uni-fab.vue";
import UniCollapse from "../../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";
import UniTag from "../../uni_modules/uni-tag/components/uni-tag/uni-tag.vue";
import UniTitle from "../../uni_modules/uni-title/components/uni-title/uni-title.vue";

const {
  days,
    dateSelect,
    dateClick,
    dayWord,
    dateChange
} = FeedDateSelect()

const {
  content,
  selectIndex,
  currentIndex,
  handleChange,
    handleUpdate
} = FeedClickHandle()

const {
  feeds,
  syncFeed,
  refrashFeedList,
  getList,
  rooms
} = FeedDataHandle()

const {
  getNetWorkType
} = loginService()

const roomId = ref()

const roomList = computed(() => {
  return rooms.value?.map(it => {
    return {
      text: it.roomName,
      value: it.id
    }
  })
})

const feedDate = computed(()=>{
	console.log(feeds.value?.filter(it=>{
    if (days.value == 0){
      return new Date(it.feed.reloadDay).getDate() == new Date().getDate()
    }
    if (days.value == 1){
      return new Date(it.feed.reloadDay).getDate() == (new Date().getDate() - 1)
    }
  }));

  return feeds.value?.filter(it=>{
    if (days.value == 0){
      return new Date(it.feed.reloadDay).getDate() == new Date().getDate()
    }
    if (days.value == 1){
      return new Date(it.feed.reloadDay).getDate() == (new Date().getDate() - 1)
    }
  })
})

const feedlist = computed(() => {
  return feedDate.value?.filter(it => {
    let isRoom = false
    if (roomId.value != null&&typeof roomId.value != 'string'){
      if (roomId.value == it.feed.roomId){
        isRoom = true
      }
    }else {
      isRoom = true
    }
    if (isRoom){
      if (currentIndex.value == 0)
        return true
      if (currentIndex.value == 1)
        if ((it.change == null && it.feed.tableStatus == '0' && it.feed.updatedTime == null)||it.feed.tableStatus == '2') {
          return true
        }
      if (currentIndex.value == 2)
        if (it.change == null && it.feed.tableStatus == '2') {
          return true
        }
      if (currentIndex.value == 3)
        if (it.change != null && it.change.changeStatus == '0') {
          return true
        }
    }
  })
})

const handleClick = async (e: any) => {
  selectIndex.value = e.index
  switch (e.index) {
    case 0:
      uni.navigateTo({
      	url:"/pages/feed/feeds"
      })
  }
}


</script>

<style scoped lang="scss">

.picker-view {
  width: 200px;
  height: 100px;
}
.item {
  height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.navbar {
  position: fixed;
  left: 0;
  top: var(--window-top) + 30px;
  display: flex;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  z-index: 1000;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    color: #3a3a3a;
    position: relative;

    &.current {
      color: #4cd964;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 120px;
        height: 0;
        border-bottom: 4px solid #4cd964;
      }
    }
  }
}

.select_box {
  margin-top: 60px;
  height: 100%;
}


.swiper-box {
  margin-top: 60px;
  height: 100%;
}

.info-box {
  margin: 10px;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
}

.status {
  text-align: right;
  line-height: 40px;
}

.backg {
  background-color: rgba(240, 240, 240, 0.76);
  height: 100%;
}

.text {
  font-size: 20px;
  color: #7f7f7f;
}
</style>
